<template>
  <el-container class="app">
    <el-header style="padding: 24px;height:80px;">
      <el-form :inline="true" :model="pageRequestBody" class="demo-form-inline">
        <el-form-item label="角色名">
          <el-input placeholder="支持模糊查询" v-model="pageRequestBody.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-container>
      <el-aside width="200px" style="background-color: #ffffff;border-right: 1px solid #EAEDF1;">
        <el-list :page="page" @current-change="handleCurrentChange" @item-click="buttonClick"/>
      </el-aside>
      <el-main>
        <div class="title">
          <font-awesome-icon icon="user"/>
          <span>{{role.name?role.name:"请选择角色"}}</span>
        </div>
        <div class="role-app">
          <el-tabs value="app">
            <el-tab-pane label="关联App" name="app">
              <role-app :appsDisabled.sync="appsDisabled" :role.sync="role"></role-app>
            </el-tab-pane>
            <el-tab-pane label="关联用户" name="user">
              <role-user :appsDisabled.sync="appsDisabled" :role.sync="role"></role-user>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import elList from "@/components/el-list/el-list.vue";
import roleApp from "./role-app.vue";
import roleUser from "./role-user.vue";
export default {
  components: { elList, roleApp, roleUser },
  data() {
    return {
      page: {},
      pagePageable: { size: 20, page: 0, sort: "name,desc" },
      pageRequestBody: {},
      role: {},
      apps: [],
      appsDisabled: true
    };
  },
  created() {
    this.getAll();
  },
  watch: {
    role: {
      handler: function() {
        if (this.role == undefined || Object.keys(this.role).length == 0) {
          this.appsDisabled = true;
        } else {
          this.appsDisabled = false;
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    init() {
      this.role = {};
    },
    getAll() {
      this.$http({
        url: "/core/api/secu-roles/page",
        method: "POST",
        params: this.pagePageable,
        data: this.pageRequestBody
      }).then(resp => {
        this.page = resp.data;
      });
    },
    handleCurrentChange(data) {
      this.init();
      this.pagePageable.page = data - 1;
      this.getAll();
    },
    buttonClick(data) {
      this.role = data;
    },
    search() {
      this.init();
      this.pagePageable.page = 0;
      this.getAll();
    }
  }
};
</script>
<style lang="less" scoped>
.title {
  font-size: 27px;
  padding-bottom: 18px;
  border-bottom: 1px solid #ebeef5;
}
.role-app {
  margin: 10px 0;
  .item {
    width: 180px;
    height: 40px;
    display: inline-block;
    margin: 10px 10px 10px 0;
  }
}
</style>

